<script setup>
import { Plus, Upload } from "@element-plus/icons-vue";
import PageContainer from "@/components/PageContainer.vue";

const sc = () => {
  alert("功能未开发");
};
</script>

<template>
  <page-container title="更换头像">
    <el-upload class="avatar-uploader">
      <img src="" class="avatar" />
      <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>

    <br />

    <el-button type="primary" :icon="Plus" size="large" @click="sc">选择图片</el-button>

    <el-button type="success" :icon="Upload" size="large" @click="sc">上传头像</el-button>
  </page-container>
</template>

<style>
.avatar-uploader {
  width: 278px;
  height: 278px;
  display: block;
}
.el-upload {
  border: 1px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload:hover {
  border-color: silver;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 278px;
  height: 278px;
  text-align: center;
}
</style>
